<!--
*@Author: QWP
*@Description: 部门通知
*@Date: 2024-07-14 17:26:27
-->
<template>
  <a-drawer
    :root-style="{ color: 'blue',}"
    :bodyStyle="{ padding: '4px',}"
    width="500px"
    title="部门通知"
    placement="right"
    class="u-dept-notice-drawer"
    :getContainer="getContainer"
    v-bind="$attrs"
  >
    <u-card class="f-h-100">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="待处理发文">
          <a-list :data-source="unRead">
            <template #renderItem="{ item }">
              <u-card :bordered="true" class="f-margin-b12 f-padding-t12">
                <a-row class="f-margin-b12" style="font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 16px;
                  color: #333333;">
                  {{ item.title }}
                </a-row>
                <a-row class="f-margin-b16" style="font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;">
                  {{ item.msg }}
                </a-row>
                <a-row justify="space-between" class="f-w-100">
                  <span style="font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #999999;">12小时前
                  </span>
                  <a-button type="primary" class="u-to-check-button">立即查看</a-button>
                </a-row>
              </u-card>
            </template>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已处理发文">
          
        </a-tab-pane>
        <a-tab-pane key="3" tab="发起的公文">
          <u-table :columns="dispatchDocCols" :data="initiateDocDatas" :pagination="false"
            :scroll="{ y: 300 }"></u-table>
        </a-tab-pane>
      </a-tabs>
    </u-card>
  </a-drawer>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { ColProps, FormItemProps, TableColumnProps, Button } from "ant-design-vue";
import dayjs from 'dayjs';

const activeKey = ref('1');

onMounted(() => {
  for(let i = 0; i < 4; i++) {
    unRead.push({
      title: '连锁加盟店24年第一季大促活动', 
      user: '马权',
      msg: '当某个自定义表单发生变化时，（字段或顺序等）应生成不同的表单版本，流程中或已完成的表单业务不受影响', 
      date: dayjs().format("YYYY-MM-DD"),
      isMust: i == 1 ? true : false
    })
    
  }
})

// 未读通知
const unRead = reactive<any[]>([]);

const getContainer = () => {
  let activePane: HTMLElement = document.querySelector('.ant-tabs-tabpane-active')
  if(activePane) {
    return activePane
  }
  return document.body
}

</script>

<style lang='scss'>
.u-dept-notice-drawer {
  .ant-tabs-tabpane {
    padding: 16px 6px;
    .u-to-check-button {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1890FF;
      background: rgba(24,144,255,0.2);
    }
  }
}
</style>